<template>
	<div>
		<!--<edit-table :columns="columns" v-model="tableData" @on-edit="handleEdit"></edit-table>-->
		<edit-table-multi :columns="columns" v-model="tableData"></edit-table-multi>
		<Button @click="turnTo">打开参数页</Button>
	</div>
</template>

<script>
	import {getTableData} from "../api/data";
	import editTable from '_c/edit-table';
	import editTableMulti from '_c/edit-table-multi';

	export default {
		name: "Table",
		components: {editTable, editTableMulti},
		data() {
			return {
				tableData: [],
				columns: [
					{key: 'name', title: '姓名'},
					{key: 'age', title: '年龄', editable: true},
					{key: 'email', title: '邮箱', editable: true},
				]
			}
		},
		mounted() {
			getTableData().then(res => {
				this.tableData = res.data;
			});

		},
		methods: {
			handleEdit({row, index, column, newValue}) {
				console.log({row, index, column, newValue})
			},
			turnTo() {
				let id = 'params' + (Math.random() * 100).toFixed(0);
				this.$router.push({
					name: 'params',
					params: {id}
				})
			}
		}
	}
</script>

<style scoped>

</style>
